<template>
    <div>
        <ZxButton @click="init">普通用法</ZxButton>
        <ZxButton @click="init1">插槽用法</ZxButton>
    </div>
</template>

<script>
import CustomHeader from './custom-header';
import CustomContent from './custom-content';

export default {
    name: 'Test',

    methods: {
        init() {
            this.$notice({
                title: '我是标题',
                message: '我是内容',
            });
        },

        init1() {
            this.$notice({
                headerSlot: {
                    component: CustomHeader,
                    props: {
                        title: '我是自定义组件标题',
                    },
                },

                contentSlot: {
                    component: CustomContent,
                    props: {
                        customProps: '我是自定义组件内容',
                        handler() {
                            alert('自定义组件方法触发成功');
                        },
                    },
                    listeners: {
                        emitEvent() {
                            alert('自定义组件emit事件触发成功');
                        },
                    },
                },
            });
        },
    },
};
</script>
